import React, { useRef, useState, useEffect } from 'react';
import instance from '../http/instance';

/**
 * LiveStream 组件 - 实现实时视频流采集和上传功能
 * 
 * 功能：
 * 1. 获取用户的摄像头和麦克风权限
 * 2. 实时显示视频流
 * 3. 录制视频并分片上传到服务器
 * 4. 提供开始/停止直播的控制
 */
export default function LiveStream() {
  const videoRef = useRef(null);
  const mediaRecorderRef = useRef(null);
  const [isStreaming, setIsStreaming] = useState(false);
  const [isRecording, setIsRecording] = useState(false);
  const [error, setError] = useState('');
  // 用于存储录制的视频片段
  const chunksRef = useRef([]);

  /**
   * 获取媒体流
   * @returns {Promise<MediaStream|null>} 返回媒体流对象，如果获取失败则返回null
   */
  const startStream = async () => {
    try {
      // 请求用户的摄像头和麦克风权限
      const stream = await navigator.mediaDevices.getUserMedia({
        video: true,
        audio: true
      });
      // 将媒体流设置到video元素
      videoRef.current.srcObject = stream;
      setIsStreaming(true);
      setError('');
      return stream;
    } catch (err) {
      setError('无法访问摄像头和麦克风：' + err.message);
      setIsStreaming(false);
      return null;
    }
  };

  /**
   * 停止媒体流和录制
   * 清理所有媒体资源并重置状态
   */
  const stopStream = () => {
    if (videoRef.current && videoRef.current.srcObject) {
      videoRef.current.srcObject.getTracks().forEach(track => track.stop());
      videoRef.current.srcObject = null;
      setIsStreaming(false);
    }
    if (mediaRecorderRef.current) {
      mediaRecorderRef.current.stop();
      setIsRecording(false);
      // 清空视频片段数组
      chunksRef.current = [];
    }
  };

  /**
   * 开始录制视频流
   * @param {MediaStream} stream - 要录制的媒体流对象
   */
  const startRecording = (stream) => {
    let time_slice=0
    // 重置视频片段数组
    chunksRef.current = [];
    
    const mediaRecorder = new MediaRecorder(stream, {
      mimeType: 'video/webm;codecs=vp8',
      videoBitsPerSecond: 2500000
    });
    mediaRecorderRef.current = mediaRecorder;
    setIsRecording(true);

    mediaRecorder.ondataavailable = async (event) => {
      if (event.data.size > 0) {
        // 将新的视频片段添加到数组中
        chunksRef.current.push(event.data);
        
        // 创建一个包含所有片段的新Blob
        const fullVideo = new Blob(chunksRef.current, { type: 'video/webm' });
        const formData = new FormData();
        formData.append('video', fullVideo);
        formData.append('time',time_slice)
        time_slice++
        try {
          await instance.post('/upload', formData, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          });
          console.log('视频片段上传成功');
        } catch (err) {
          console.error('上传失败：', err);
          setError('上传失败：' + err.message);
        }
      }
    };

    mediaRecorder.start(10000);
  };

  /**
   * 处理开始/停止按钮点击事件
   * 根据当前状态切换直播和录制功能
   */
  const handleToggleStream = async () => {
    if (!isStreaming) {
      // 开始直播
      const stream = await startStream();
      if (stream) {
        startRecording(stream);
      }
    } else {
      // 停止直播
        stopStream()
      await instance.post('/upload_he').
      then(res=>{
      
      }).catch(err=>{
        console.log(err);
        
      })
      
    }
  };

  // 组件卸载时清理资源
  useEffect(() => {
    return () => {
      stopStream();
    };
  }, []);

  return (
    <div className="live-stream-container">
      <video
        ref={videoRef}
        autoPlay
        playsInline
        muted
        className="live-stream-video"
      />
      <div className="controls">
        <button
          onClick={handleToggleStream}
          className={`stream-button ${isStreaming ? 'streaming' : ''}`}
        >
          {isStreaming ? '停止直播' : '开始直播'}
        </button>
        {error && <div className="error-message">{error}</div>}
      </div>
    </div>
  );
}